<template>
  <div class=''>
    <el-dialog
        title="添加商品"
        :visible.sync='detailDialog'
        width="70%"
        :before-close="handleClose"
        class="detail"
    >
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="form">
      <el-form-item label="商品名称" prop="name">
        <el-input style="width:200px;" v-model="ruleForm.name"></el-input>
      </el-form-item>
      <el-form-item label="商品价格" prop="name">
        <el-input style="width:200px;" v-model="ruleForm.name"></el-input>
      </el-form-item>
      <el-form-item label="佣金比例" prop="name">
        <el-input style="width:200px;" v-model="ruleForm.name"></el-input>
        <span>%</span>
      </el-form-item>
      <el-form-item label="佣金金额" prop="name">
        0元
      </el-form-item>
      <el-form-item label="服务保障" >
        <el-input style="width:100px;" v-model="inputValue"></el-input>
        <el-button type="primary" @click="handleInputConfirm">添加</el-button>
      </el-form-item>
      <el-form-item>
        <el-tag
          :key="tag"
          v-for="tag in dynamicTags"
          closable
          :disable-transitions="false"
          @close="deleteTag(tag)">
          {{tag}}
        </el-tag>
      </el-form-item>
      <el-form-item label="商品图：">
        <el-upload
          action="https://jsonplaceholder.typicode.com/posts/"
          list-type="picture-card"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove">
          <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
    </el-dialog>
  </div>
</template>

<script>
import MultiUpload from '@/components/Upload/multiUpload'
import Tinymce from '@/components/Tinymce'
export default {
  name: 'child',
  props:{
    detailDialog:Boolean
  },
  data () {
    return {
      inputValue:null,
      ruleForm: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        },
        rules: {
          name: [
            { required: true, message: '请输入活动名称', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
          region: [
            { required: true, message: '请选择活动区域', trigger: 'change' }
          ],
          date1: [
            { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
          ],
          date2: [
            { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
          ],
          type: [
            { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
          ],
          resource: [
            { required: true, message: '请选择活动资源', trigger: 'change' }
          ],
          desc: [
            { required: true, message: '请填写活动形式', trigger: 'blur' }
          ]
        },
        dynamicTags: [],
        dialogImageUrl: '',
        dialogVisible: false,
        activeHtmlName: 'pc'
    }
  },
  components:{
    MultiUpload,Tinymce
  },
  computed:{
    
  },
  methods: {
     handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
    // 关闭
    handleClose(){
        this.$parent.closeDialog();
    },
    // 提交
    onSubmit() {
        console.log('submit!');
      },
    // 添加标签
    handleInputConfirm(){
      let inputValue = this.inputValue;
      if (inputValue && this.dynamicTags.indexOf(inputValue) < 0) {
        this.dynamicTags.push(inputValue);
      }
      this.inputValue = ''
    },
    // 删除标签
    deleteTag(tag) {
        this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
      },
  }
}
</script>

<style lang='scss' scoped>
.detail{
  .form{
    width: 70%;
    margin: 0 auto;
    .el-tag + .el-tag {
      margin-left: 10px;
    }
  }
}
</style>
